<template>
  <div class="home-padding">
    <div class="clipboard-container">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="学校">
          <el-select v-model="form.school" placeholder="请选择">
            <el-option label="玉山一中" value="1"></el-option>
            <el-option label="玉山二中" value="2"></el-option>
            <el-option label="清林中学" value="3"></el-option>
            <el-option label="横街中学" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考生学号">
          <el-input v-model="form.id" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="考生姓名">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="考试类型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="周练" value="shanghai"></el-option>
            <el-option label="月考" value="beijing"></el-option>
            <el-option label="期中" value="guangzhou"></el-option>
            <el-option label="期末" value="shenzhen"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"></el-button>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>

      <div class="operation-button">
        <el-button type="primary" @click="deleteBatch" size="medium">删除</el-button>
        <el-button type="primary" @click="addButton" size="medium">添加</el-button>
      </div>

      <el-input type="textarea" class="contentCut" id="copy-input"></el-input>
      <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" sortable width="50" align="center"></el-table-column>
        <el-table-column prop="school" label="学校" min-width="180" align="center"></el-table-column>
        <el-table-column prop="" label="考试类型" min-width="180" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="" effect="plain"  v-if="scope.row.type === '周练'">{{ scope.row.type }}</el-tag>
            <el-tag size="small" type="" effect="light"  v-else-if="scope.row.type === '月考'">{{ scope.row.type }}</el-tag>
            <el-tag size="small" type="" effect="dark" v-else>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="学生" min-width="180" align="center"></el-table-column>
        <el-table-column prop="date" label="考试日期" sortable min-width="180" align="center"></el-table-column>
        <el-table-column prop="scores" min-width="180" align="center">
          <template slot="header" slot-scope="scope">
            <span>总分</span>
            <el-button icon="el-icon-document-copy" type="text" class="primary-icon-copy primary-color" @click="copy(scope)"></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="各科" min-width="180"  align="center"></el-table-column>
        <el-table-column label="操作" min-width="140"  align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="editButton(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteButton(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>

      <el-dialog title="操作" :visible.sync="dialogFormVisible" width="550px" :destroy-on-close="true">
        <el-form :model="dialogForm" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="15">
              <el-form-item label="学校">
                <el-input v-model="dialogForm.school"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="学生">
                <el-input v-model="dialogForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="总分">
                <el-input v-model="dialogForm.scores"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="各科">
                <el-input type="textarea" :rows="4"  v-model="dialogForm.score"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="考试类型">
                <el-select v-model="dialogForm.type" placeholder="请选择">
                  <el-option label="周练" value="shanghai"></el-option>
                  <el-option label="月考" value="beijing"></el-option>
                  <el-option label="期中" value="guangzhou"></el-option>
                  <el-option label="期末" value="shenzhen"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

    </div>

  </div>
</template>

<script>
    export default {
        name: "clipboard",
      data() {
        return {
          dialogFormVisible: false,
          multipleSelection: [],
          loading: false,
          form: {
            type: '',
            id: '',
            school: '',
            scores: '',
            score: '',
            name: '',

            pageNo: 1,
            limit: 10,
          },
          defaultForm: {},
          dialogForm: {
            type: '',
            id: '',
            school: '',
            scores: '',
            score: '',
            name: ''
          },
          currentPage4: 4,
          tableData: [{
            school: '玉山一中',
            type: '期中',
            date: '2016-05-02',
            name: '王小虎',
            scores: '600',
            score: '上海市普陀区金沙江路 1518 弄'
          }, {
            school: '玉山一中',
            type: '期末',
            date: '2016-05-04',
            name: '王小虎',
            scores: '600',
            score: '上海市普陀区金沙江路 1518 弄'
          }, {
            school: '玉山一中',
            type: '月考',
            date: '2016-05-01',
            name: '王小虎',
            scores: '600',
            score: '上海市普陀区金沙江路 1518 弄'
          }, {
            school: '玉山一中',
            type: '周练',
            date: '2016-05-03',
            name: '王小虎',
            scores: '600',
            score: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      },
      created() {
        //深拷贝
        this.defaultForm = JSON.parse(JSON.stringify(this.form));
      },
      methods: {
        onSubmit() {
          console.log('submit!');
          this.loading = true;
          window.setTimeout(() => {
            this.loading = false;
          },500)
        },
        addButton() {
          this.dialogFormVisible = true
          this.dialogForm = JSON.parse(JSON.stringify(this.defaultForm));
        },
        editButton(row) {
          this.dialogFormVisible = true
          Object.assign(this.dialogForm, row)
        },
        deleteButton(row) {
          this.$confirm('确认删除此条吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true;
            window.setTimeout(() => {
              this.loading = false;
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            },400)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        deleteBatch() {
          if (this.multipleSelection.length < 1 || this.multipleSelection === []) {
            this.$message.error('请选择数据')
            return
          }
          this.$confirm('确认要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true;
            window.setTimeout(() => {
              this.loading = false;
              this.$message({
                type: 'success',
                message: '已删除'
              });
            },400)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        copy(scope) {
          this.copyKey = scope.column.property;
          let columnList = [];
          if (this.tableData && Array.isArray(this.tableData)) {
            this.tableData.forEach(item => {
              columnList.push(item[this.copyKey]);
            });
          }
          const copyStr = columnList.join('\n');
          // 直接赋值剪切板内没有元素
          var input = document.getElementById("copy-input");
          input.value = copyStr; // 修改文本框的内容
          input.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
          input.blur();   // 取消选中文本 失去焦点
          this.$message.success('复制成功');
        },
        handleSizeChange(val) {
          this.form.limit = val;
          this.onSubmit(this.form.limit, this.form.pageNo);
        },
        handleCurrentChange(val) {
          this.form.pageNo = val;
          this.onSubmit();
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
      }
    }
</script>

<style lang="scss">
  .clipboard-container {
    padding: 15px;
    background-color: #fff;
  }
</style>
